<template>
  <div class="viewport" >
    <homeHead :showLeft="true" :name="'积分明细'"></homeHead>
    <div class="tab">
    </div> 
        <div class="tabBanner"> 
            <span class="border">总积分： {{ allBonus }}</span>
            <span>今日积分： {{ todayBonus }} </span>
        </div>
    <!-- 重构代码 -->
    <div class="card">
      <mt-loadmore
        :bottom-method="loadBottom"
        :auto-fill="false"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
      > 
        <ul>
          <li v-for="(item, index) in listData" :key="index">
            <span class="font">
              <span class="name">{{item.操作类型}}</span>
              <span class="num">{{ item.分值情况 }}</span>
            </span>
            <span class="date">{{item.time}}</span>
          </li>
        </ul>
      </mt-loadmore>
      <p v-if="allLoaded == true" style="text-align: center">暂无更多数据</p>
      <p v-else style="text-align: center">上拉加载更多</p>
    </div>
  </div>
</template>
<script>
import homeHead from "./head.vue";
import { mine_getMyBonus, mine_getTotalBonus } from "../../api/mine";
export default {
  components: {
    homeHead,
  },
  data() {
    return {
      // 总页数
      allPage: "",
      allBonus: "",
      todayBonus: "",
      allLoaded: false,
      listData: [],
      postAllData: {
      },
      postData: {
        pageIndex: 1,
        pageSize: 12,
      }, 
      operation:null,
    };
  },
  created() {
   
  },
  mounted() { 
    this.getList();
    this.getAllData();
  },
  watch: {},
  methods: {
    // 获取明细列表
    getList() {  
      let _this = this;
      mine_getMyBonus(this.postData).then((res) => {  
        _this.listData.push(...JSON.parse(res.data.data)); 
        _this.listData = _this.listData.map(i => {
          i.time = myReplace (i.操作时间.split(" ")[0],"/","-");
          return i;
        });  
        // 用正则表达式进行替换的方法
        function myReplace(sInput,sChar,sReplaceChar) {
            if(sInput==""||sInput==undefined) {
                return "";
            }
            var oReg =new RegExp(sChar,"g");
            return sInput.replace(oReg, sReplaceChar);
        }
        // 总条数
        var total = res.data.DataCount; 
        // 总页数
        _this.allPage = Math.ceil(total / this.postData.pageSize);
        if (_this.postData.pageIndex < _this.allPage) {
          //可以上拉
          _this.allLoaded = false;
        } else {
          //控制是否可以滑动
          _this.allLoaded = true;
        }
      });
    },
    // 获取今日、总
    getAllData() { 
      let _this = this;  
      mine_getTotalBonus(this.postAllData).then((res) => {  
        _this.allBonus = JSON.parse(res.data.data).totalPoint;
        _this.todayBonus = JSON.parse(res.data.data).todayPoint;
      });
    },
    // 上拉刷新
    loadBottom() { 
      if (this.postData.pageIndex < this.allPage) {
        this.postData.pageIndex += 1;
        this.getList();
        this.$refs.loadmore.onBottomLoaded();
      }
    },
  },
};
</script>
<style  lang="less" scoped>
.viewport {
  overflow-x: hidden !important;
  overflow-y: hidden !important; 
  height:100vh;

}
.tab {   
  width: 150%;
  height: 185px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  top: 0px;
  background: #367bf0;
  border-radius: 50%;
}
  .tabBanner {
    position: absolute;
    top: 65px;
    font-size: 18px;
    color: #fff;
    z-index: 9999;  
    width: 100vw;
    text-align: center;  
    display: flex;    
    .border {
      border-right: 2px solid #fff; 
      text-align: right;  
      padding-right: 20px;
      box-sizing: border-box;
    }
    span {
      display: inline-block;
      width:50%; 
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    span:nth-child(2) {
      text-align: left;
      padding-left: 20px;
      box-sizing: border-box;  
    }
  } 
.card { 
  width: calc(100% - 40px);
  height:calc(100vh - 150px);
  border-radius: 10px;
  background: #fff;
  margin: 0 auto;
  position: relative;
  top: -70px;
  overflow-y: scroll;
  ul {
    width: 100%;
    list-style: none;
    padding: 0 20px;
    box-sizing: border-box;
    min-height: calc(100vh - 400px);
    li {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ddd;
      .font {
        display: inline-block;
        width: calc(100% - 90px);
        .name {
          display: inline-block;
          vertical-align: middle;
        }
        .num {
          vertical-align: middle;
          color: #f99155;
        }
        .date {
          width: 70px;
          text-align: right;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: inline-block;
          border: 1px solid red;
        }
      }
    }
  }
}
</style>